<template>
    <div class="header" v-if="currentUser.isLogin">
        <Dropdown :title="`你好 ${currentUser.name}`">
            <Dropdownitem v-for="item in list" :key="item.id" :disabled='item.disabled'>
                <a href="#" class="dropdown-item">{{item.name}}</a>  
            </Dropdownitem>
        </Dropdown>
    </div>
    <div class="header" v-else>
        <button type="button" class="btn btn-primary" @click="toLogin">登录</button>
        <button type="button" class="btn btn-primary">注册</button>
    </div>

</template>
<script lang="ts">
import {defineComponent, PropType} from 'vue'
import { useRouter } from 'vue-router';
import Dropdown from './Dropdown.vue'
import Dropdownitem from './DropdownItem.vue'
export interface LoginUser{
    isLogin:boolean,
    name?:string,
    id?:number
}
interface dropdownListType{
    name:string,
    id:number,
    disabled?:boolean
}
const list:dropdownListType[]=[
    {name:'新建文章',id:1},
    {name:'编辑资料',id:2,disabled:true},
    {name:'退出登录',id:3}
]
export default defineComponent({
    name:'HeaderName',
    props:{
        currentUser:{
            type:Object as PropType<LoginUser>,
            require:true
        }
    },
    components:{
        Dropdown,
        Dropdownitem
    },
    setup(){
        const $router = useRouter();
        const toLogin=()=>{
            $router.push({path:'/login'})
        }
        return {
            list,
            toLogin
        }
    }
})
</script>
<style scoped>
.header{
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: #0d6efd;
    text-align: right;
    color: gray;
    padding-right: 20px;
    box-sizing: border-box;
}
.header /deep/ .btn-outline-light{
    color: black;
    border-color: black;
}
button{
    margin: 20px 0 0 20px;
    float: right;
}
</style>